@layout("/common/_container.html"){
<style type="text/css">
div.circle{
    height: 100px;
    width: 100px;
    background: #9da;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    margin: auto auto 20px auto;
    }



div.area-info{
	margin: auto 15px auto 15px
}
#arae-info-panel {
    padding: 15px;
    margin: auto;
    width: 90%;
}

#arae-info-panel div{
 	text-align: center;
}

#area-select{
	margin: auto auto 20px auto;
}

#arae-info-panel span{
    color: white;
    font-size: 25px;
}


#arae-info-panel{
	-moz-column-count:4; /* Firefox */
	-webkit-column-count:4; /* Safari 和 Chrome */
	column-count:4;
}

.circle{
	cursor:pointer;
}

#area-count .circle{
	background: #6699FF;
}
#area-serious .circle{
	background: #CC0000;
}
#area-attention .circle{
	background: #FF9900;
}
#area-info .circle{
	background: #FF3300;
}

.area-status{
	-moz-column-count:5; /* Firefox */
	-webkit-column-count:5; /* Safari 和 Chrome */
	column-count:5;
	-moz-column-gap:40px; /* Firefox */
	-webkit-column-gap:40px; /* Safari and Chrome */
	column-gap:40px;

	-moz-column-rule:1px outset #CCCCCC; /* Firefox */
	-webkit-column-rule:1px outset #CCCCCC; /* Safari and Chrome */
	column-rule:1px outset #CCCCCC;
}


.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    color: inherit;
}

.area-status div{
	text-align: center;
}


.area-status h3 {
    font-size: 14px;
    font-weight: normal;
    color: #666;
}

.area-status a {
	font-size: 26px;
    color: #333;
}


small a{
	padding-left: 20px;
}

.area-list{
	height: 200px;
	overflow:auto;
}

.ztree {height:200px; overflow:auto;}
</style>



<div class="container-fluid" style="padding: 0 !important;">
	<div class="row">
		<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<div class="row" id="area-select">
							<div class="col-sm-12">
								<div>
									区域选择:
									<span class="dropdown">
										<a href="javascript:void(0);" data-toggle="dropdown">
											<span class="text" data-role="label" id="selectArea">未选择</span>
											<span class="caret"></span>
										</a>
										<div class="dropdown-menu" style="left: 0;right: auto;">
											<ul data-role="tree" id="areaTree" class="ztree"></ul>
										</div>
									</span>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-12">
								<div class="panel panel-default">
									<div class="panel-heading">
										<h3>整体情况<small class="pull-right">${dataTime}</small></h3>
									</div>
								<div class="panel-body" id="arae-info-panel">
									<div id="area-count" class="area-info">
										<div class="circle" data-placement="bottom" data-html="true" data-toggle="popover" data-container="body" data-content="
										<div class='area-list'>
											@for(area in monitorArea){
												<a class='list-group-item J_menuItem' href='${ctxPath}/screening?areaId=${area.id}&areaName=${area.name}' name='tabMenuItem'>${area.name}</a>
											@}
											
									</div>" data-placement="bottom">
										<span>${monitorAreaNum}个</span>
										</div>
										<h3>监控区域数量</h3>
									</div>
									<div id="area-warn" class="area-info">
										<div class="circle" data-placement="bottom" data-html="true" data-toggle="popover" data-container="body" data-content="<div class='area-list'>
											
											@for(area in warnArea){
												<a class='list-group-item' href='${ctxPath}/screening?areaId=${area.id}&areaName=${area.name}' name='tabMenuItem'>${area.aname}</a>
											@}
										</div>" data-placement="bottom">
										<span>${warnAreaNum}个</span></div>
										<h3>警戒告警区域数量</h3>
									</div>
									<div id="area-attention" class="area-info">
										<div class="circle" data-placement="bottom" data-html="true" data-toggle="popover" data-container="body" data-content="<div class='area-list'>
											@for(area in saturatedwarnArea){
												<a class='list-group-item' href='${ctxPath}/screening?areaId=${area.id}&areaName=${area.name}' name='tabMenuItem'>${area.name}</a>
											@}
											</div>" data-placement="bottom">
											<span>${saturatedwarnAreaNum}个</span>
											</div>
										<h3>饱和告警区域数量</h3>
									</div>
									<div id="area-serious" class="area-info">
										<div class="circle" data-placement="bottom" data-html="true" data-toggle="popover" data-container="body" data-content="<div class='area-list'>
											@for(area in seriouswarnArea){
												<a class='list-group-item' href='${ctxPath}/screening?areaId=${area.id}&areaName=${area.name}' name='tabMenuItem'>${area.name}</a>
											@}
											</div>" data-placement="bottom">
											<span>${seriouswarnAreaNum}个</span>
											</div>
										<h3>严重告警区域数量</h3>
									</div>
								</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-12">
								<div class="panel panel-default">
									  <div class="panel-heading">
									  	<h3 class="panel-title">${importantAreaName}<small><a href="${ctxPath}/screening?areaId=${importantAreaId}&areaName=${importantAreaName}" name="tabMenuItem">查看详情</a></small><small class="pull-right">特别关注</small></h3>
									  </div>
									  <div class="panel-body area-status">
									 		<div>
									 			<h3>告警级别</h3>
									   			<p><a name="warnLevel" href="${ctxPath}/screening?areaId=${importantAreaId}&areaName=${importantAreaName}" name="tabMenuItem">${importantAreaWarnLevel}</a></p>
									 		</div>
									 		<div>
									 			<h3>实时客流（人）</h3>
									   			<p><a href="${ctxPath}/screening?areaId=${importantAreaId}&areaName=${importantAreaName}" name="tabMenuItem">${importantAreaPassengerCount}</a></p>
									 		</div>
									 		<div>
									 			<h3>客流密度</h3>
									   			<p><a href="${ctxPath}/screening?areaId=${importantAreaId}&areaName=${importantAreaName}" name="tabMenuItem">${importantAreaPassengerDensity}</a></p>
									 		</div>
									 		<div>
									 			<h3>未来一小时客流预测</h3>
									   			<p><a href="${ctxPath}/screening?areaId=${importantAreaId}&areaName=${importantAreaName}" name="tabMenuItem">${importantAreaPassengerDensityForecast}</a></p>
									 		</div>
									 		<div>
									 			<h3>客流增速（人）</h3>
									   			<p><a href="${ctxPath}/screening?areaId=${importantAreaId}&areaName=${importantAreaName}" name="tabMenuItem">${importantAreaPassengerSpeedUp}</a></p>
									 		</div>
									  </div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-12">
								<div class="panel panel-default">
									  <div class="panel-heading">
									  	<h3 class="panel-title">${maxPassengerDensityAreaName}<small><a href="${ctxPath}/screening?areaId=${maxPassengerDensityAreaId}&areaName=${maxPassengerDensityAreaName}" name="tabMenuItem">查看详情</a></small><small class="pull-right">客流密度最大</small></h3>
									  </div>
									   <div class="panel-body area-status">
									   	<div>
									 			<h3>告警级别</h3>
									   			<p><a name="warnLevel" href="${ctxPath}/screening?areaId=${maxPassengerDensityAreaId}&areaName=${maxPassengerDensityAreaName}" name="tabMenuItem">${maxPassengerDensityAreaWarnLevel}</a></p>
									 		</div>
									 		<div>
									 			<h3>实时客流（人）</h3>
									   			<p><a href="${ctxPath}/screening?areaId=${maxPassengerDensityAreaId}&areaName=${maxPassengerDensityAreaName}" name="tabMenuItem">${maxPassengerDensityAreaPassengerCount}</a></p>
									 		</div>
									 		<div>
									 			<h3>客流密度</h3>
									   			<p><a href="${ctxPath}/screening?areaId=${maxPassengerDensityAreaId}&areaName=${maxPassengerDensityAreaName}" name="tabMenuItem">${maxPassengerDensityAreaPassengerDensity}</a></p>
									 		</div>
									 		<div>
									 			<h3>未来一小时客流预测</h3>
									   			<p><a href="${ctxPath}/screening?areaId=${maxPassengerDensityAreaId}&areaName=${maxPassengerDensityAreaName}" name="tabMenuItem">${maxPassengerDensityAreaPassengerDensityForecast}</a></p>
									 		</div>
									 		<div>
									 			<h3>客流增速（人）</h3>
									   			<p><a href="${ctxPath}/screening?areaId=${maxPassengerDensityAreaId}&areaName=${maxPassengerDensityAreaName}" name="tabMenuItem">${maxPassengerDensityAreaPassengerSpeedUp}</a></p>
									 		</div>
									  </div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-12">
								<div class="panel panel-default">
									  <div class="panel-heading">
									  	<h3 class="panel-title">${maxExternalPassengerAreaName}<small><a href="${ctxPath}/screening?areaId=${maxExternalPassengerAreaId}&areaName=${maxExternalPassengerAreaName}">查看详情</a></small><small class="pull-right">外来人口最多</small></h3>
									  </div>
									   <div class="panel-body area-status">
									   	<div>
									 			<h3>告警级别</h3>
									   			<p><a name="warnLevel" href="${ctxPath}/screening?areaId=${maxExternalPassengerAreaId}&areaName=${maxExternalPassengerAreaName}">${maxExternalPassengerAreaWarnLevel}</a></p>
									 		</div>
									 		<div>
									 			<h3>实时客流（人）</h3>
									   			<p><a href="${ctxPath}/screening?areaId=${maxExternalPassengerAreaId}&areaName=${maxExternalPassengerAreaName}">${maxExternalPassengerAreaPassengerCount}</a></p>
									 		</div>
									 		<div>
									 			<h3>客流密度</h3>
									   			<p><a href="${ctxPath}/screening?areaId=${maxExternalPassengerAreaId}&areaName=${maxExternalPassengerAreaName}">${maxExternalPassengerAreaPassengerDensity}</a></p>
									 		</div>
									 		<div>
									 			<h3>未来一小时客流预测</h3>
									   			<p><a href="${ctxPath}/screening?areaId=${maxExternalPassengerAreaId}&areaName=${maxExternalPassengerAreaName}">${maxExternalPassengerAreaPassengerDensityForecast}</a></p>
									 		</div>
									 		<div>
									 			<h3>客流增速（人）</h3>
									   			<p><a href="${ctxPath}/screening?areaId=${maxExternalPassengerAreaId}&areaName=${maxExternalPassengerAreaName}">${maxExternalPassengerAreaPassengerSpeedUp}</a></p>
									 		</div>
									  </div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-12">
								<div class="panel panel-default">
									  <div class="panel-heading">
									  	<h3 class="panel-title">${maxMobilityAreaName}<small><a href="${ctxPath}/screening?areaId=${maxMobilityAreaId}&areaName=${maxMobilityAreaName}">查看详情</a></small><small class="pull-right">人口流动最大</small></h3>
									  </div>
									   <div class="panel-body area-status">
									   	<div>
									 			<h3>告警级别</h3>
									   			<p><a name="warnLevel" href="${ctxPath}/screening?areaId=${maxMobilityAreaId}&areaName=${maxMobilityAreaName}">${maxMobilityAreWarnLevel}</a></p>
									 		</div>
									 		<div>
									 			<h3>实时客流（人）</h3>
									   			<p><a href="${ctxPath}/screening?areaId=${maxMobilityAreaId}&areaName=${maxMobilityAreaName}">${maxMobilityAreaPassengerCount}</a></p>
									 		</div>
									 		<div>
									 			<h3>客流密度</h3>
									   			<p><a href="${ctxPath}/screening?areaId=${maxMobilityAreaId}&areaName=${maxMobilityAreaName}">${maxMobilityAreaPassengerDensity}</a></p>
									 		</div>
									 		<div>
									 			<h3>未来一小时客流预测</h3>
									   			<p><a href="${ctxPath}/screening?areaId=${maxMobilityAreaId}&areaName=${maxMobilityAreaName}">${maxMobilityAreaPassengerDensityForecast}</a></p>
									 		</div>
									 		<div>
									 			<h3>客流增速（人）</h3>
									   			<p><a href="${ctxPath}/screening?areaId=${maxMobilityAreaId}&areaName=${maxMobilityAreaName}">${maxMobilityAreaPassengerSpeedUp}</a></p>
									 		</div>
									  </div>
								</div>
							</div>
						</div>
					</div>
				</div>
		</div>
	</div>
</div>
<script src="${ctxPath}/static/modular/blackboard/blackboard.js"></script>
@}
